<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useEAuthList } from '@fl/api/anjutong'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { getCompanyOrgOld } from '@fl/api/iam-api'

import { useDicts } from './hooks/use-dicts'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'admin-e-auth',
})

const tableRef = ref()
const { dicts: { EAuthStatus }, useDict } = useDicts()
const orgOptions = ref([])

const initialState = {
    status: '',
    s2ObjectId: ''
}
const state = ref<FieldValues>(cloneDeep(initialState))

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

const params = computed(() => ({
    pageIndex: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    ...state.value,
}))

// 列表
const { data, isLoading } = useEAuthList(params)
const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.rows)
        tablePage.value.total = data.value.total!
    }
})

// 企业列表
function getOrgList() {
    getCompanyOrgOld({
        page: 1,
        size: 9999,
    }).then((res: any) => {
        console.log('index', res)
        orgOptions.value = res.rows.reduce((pre, cur) => {
            const obj = { label: null, value: null }
            obj.label = cur.enterpriseName
            obj.value = cur.enterpriseObjectID
            pre.push(obj)
            return pre
        }, [])
    })
}
getOrgList()

function submit(values: FieldValues) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}

function reset() {
    state.value = initialState
    tablePage.value = initialPage
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const columns: PlusColumn[] = [
    {
        label: '授权状态',
        prop: 'status',
        valueType: 'select',
        options: EAuthStatus
    },
    {
        fieldProps: {
            filterable: true,
        },
        label: '企业名称',
        prop: 's2ObjectId',
        valueType: 'select',
        options: orgOptions
    },
]

const gridOptions = reactive<VxeGridProps>({
    columns: [
        // { type: 'checkbox', width: 50 },
        { field: 'name', title: '企业名称' },
        { field: 'phone', title: '企业联系方式' },
        { field: 'taxNo', title: '信用代码' },
        { field: 'status', slots: { default: 'status' }, title: 'e签宝认证授权状态' },
        { field: 'address', title: '企业地址' },
        // { slots: { default: 'operate' }, title: '操作', width: 200 },
    ],
})
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="搜索"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable ref="tableRef"
                     v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     @page-change="handlePageChange"
        >
            <!-- <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="goToAdd"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增模板
                </ElButton>
            </template> -->

            <template #status="{ row }">
                {{ useDict('EAuthStatus', row.status) }}
            </template>

            <!-- <template #operate="{ row }">
                <el-button text
                           @click="goToShow(row)"
                >
                    查看
                </el-button>
            </template> -->
        </SearchTable>
    </ElCard>
</template>
